<template>
  <div class="import">
    <!-- 相当于这个组件可以让外界传入2个回调函数   -->
    <!-- 一个是导入前触发(beforeUpload) -->
    <!-- 一个是导入成功后触发(onSuccess) -->
    <UploadExcel
      :beforeUpload="beforeUpload"
      :onSuccess="onSuccess"
    ></UploadExcel>
  </div>
</template>

<script>
//导入批量添加员工的接口
import { addEmpBatch } from "@/api/employees";
export default {
  data() {
    return {};
  },
  methods: {
    //导入前需要做的是判断当前的文档是否符合我们限制的大小内,如果在就放行执行下面的代码,如果超过就返回
    beforeUpload(file) {
      if (file.size >= 2 * 1024 * 1204) {
        return fasle;
      }
      return true;
    },

    //导入成功之后触发的事件是,通过接口请求数据
    // 如果读取成功会调用这个回调函数
    // 会把读取的内容当做参数传递，参数是一个对象
    // 对象里有2个属性：header, results
    // header代表表头（数组），results代表内容（数组）
    // onSuccess (res) {

    // 使用对象的解构语法直接用到results
    async onSuccess({ header, results }) {
      //首先需要对表头进行处理,因为导入的时候我们的表头是中文的,我们需要将中文的表头转化为英文的表头
      if (this.$route.query.type == "emp") {
        const userRelations = {
          入职日期: "timeOfEntry",
          手机号: "mobile",
          姓名: "username",
          转正日期: "correctionTime",
          工号: "workNumber",
        };
        let list = results.map((item) => {
          //   console.log(item);
          //创建一个对象用于保存,表格传入的数据表头是中文的,但是我们自己转换成英文,存入newObj中
          let newObj = {};
          // 遍历传入的数据,然后遍历,将键取出来之后
          for (let key in item) {
            // 将准备好的userRelations,取出英文名,存取来,将新的键和值保存在newobj中
            let engKey = userRelations[key];
            if (key == "入职日期" || key == "转正日期") {
              let excelTime = item[key];
              // 转成JS时间
              let date = new Date((excelTime - 1) * 24 * 60 * 60 * 1000);
              let year = date.getFullYear();
              date.setFullYear(year - 70);
              newObj[engKey] = date;
            } else {
              // 把原来对象里的值赋值给新对象，并且是存到新的英文键对应的属性上
              newObj[engKey] = item[key];
            }
          }
          //   console.log(newObj);
          return newObj;
        });
        //把读取到的excel内容通过调用接口传递给服务器
        await addEmpBatch(list);
        this.$message.success("导入成功");
        this.$router.back();
      }
    },
  },
};
</script>

<style>
</style>